<script lang="ts" setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

import { DragType, type ModuleSlot } from './types'

const { t } = useI18n<[typeof import('./locales/zh-CN.json')]>({ useScope: 'parent' })

defineProps<{ moduleSlots: ModuleSlot[]; arrowData: string[] }>()

const tips = computed(() => [
  { tip: t('puzzlePanel.testPassing'), class: 'grid-area-[6/4] before:bg-arco-success-6' },
  { tip: t('puzzlePanel.testFailing'), class: 'grid-area-[6/6] before:bg-red' },
  { tip: t('puzzlePanel.waiting'), class: 'grid-area-[6/8] before:bg-slate' }
])
</script>

<template>
  <div grid="~ rows-[1fr_repeat(5,auto)_1fr] cols-[1fr_repeat(9,auto)_1fr]">
    <div
      class="w-24 h-16 text-center select-none"
      :class="arrow"
      v-for="arrow of arrowData"
      :key="arrow"
    >
      <i class="i-ph-arrow-fat-lines-right text-[4rem]" />
    </div>

    <div
      :key="id"
      :class="style"
      :data-id="id"
      :data-type="DragType.ModuleSlot"
      class="w-24 h-16 rounded flex items-center"
      v-for="{ id, style, module } of moduleSlots"
      :draggable="module === undefined ? false : true"
      :border="module === undefined ? 'dashed' : 'solid'"
      :cursor="module === undefined ? '' : 'grab active:grabbing'"
    >
      <img
        v-show="module"
        class="w-full pointer-events-none"
        :src="module?.svg"
        :alt="module?.name"
      />
    </div>

    <div
      :key="tip"
      :class="style"
      v-for="{ class: style, tip } of tips"
      class="select-none flex items-center w-24 h-16 before:content-[''] before:mr-1 before:rounded-full before:inline-block before:w-4 before:h-4"
    >
      {{ tip }}
    </div>
  </div>
</template>
